<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div id="user-center-profile" class="panel-body" style="padding-bottom: 100px">
    <form id="form_user_profile_input" class="form-horizontal" autocomplete="off">
        <h1 class="page-header text-overflow pad-btm bord-btm mar-btm">基本资料</h1>

        <input type="hidden" id="keyId" name="keyId" th:value="${user?.id}" />

        <div class="form-group">
            <label class="col-md-2 control-label">真实姓名<i class="fa fa-asterisk txt-color-red"></i></label>
            <div class="col-md-8">
                <input type="text" name="name" id="name" th:value="${user?.name}" class="form-control" placeholder="请输入真实姓名">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">用户名</label>
            <div class="col-md-8">
                <input type="text" name="username" id="username" th:value="${user?.username}" class="form-control" placeholder="用于登陆的用户名">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">手机号</label>
            <div class="col-md-8">
                <input type="text" name="phone" id="phone" th:value="${user?.phone}" class="form-control" placeholder="用于登陆的手机号">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">邮箱</label>
            <div class="col-md-8">
                <input type="text" name="email" id="email" th:value="${user?.email}" class="form-control" placeholder="用于登陆的邮箱">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">性别</label>
            <div class="col-md-8">
                <div class="radio">
                    <input type="radio" name="gender" id="gender1" value="male" class="magic-radio" th:checked="${#strings.equals(user?.gender, 'male')}" >
                    <label for="gender1">男</label>
                    <input type="radio" name="gender" id="gender2" value="female" class="magic-radio" th:checked="${#strings.equals(user?.gender, 'female')}" >
                    <label for="gender2">女</label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">生日</label>
            <div class="col-md-8">
                <input type="text" name="birthday" id="birthday" th:value="${#dates.format(user?.birthday, 'yyyy-MM-dd')}" class="form-control" placeholder="请选择生日">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">所在地区</label>
            <div class="col-md-8">
                <input type="text" name="addressAll" id="addressAll" class="form-control" data-toggle="city-picker">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">详细地址</label>
            <div class="col-md-8">
                <input type="text" name="address" id="address" class="form-control" th:value="${user?.address}" placeholder="请输入详细地址" >
            </div>
        </div>

    </form>
</div>

<div class="panel-footer text-right">
    <button id="save-center-profile" class="btn btn-success" type="button">保存</button>
</div>


<script th:inline="javascript">

    $(function(){
        __laydate_date("birthday");
        __city_picker($("#addressAll"), [[${user?.province}]], [[${user?.city}]], [[${user?.county}]]);
        fn_center_profile_validate();
        __panelOverlay("user-center-profile");
    });

    function fn_center_profile_validate(){
        __init_validate("form_user_profile_input", {
            rules : {
                birthday : {
                    required : true
                },
                name : {
                    required : true
                },
                username : {
                    remote : {
                        type: 'post',
                        url: '/main/member/validate/account',
                        data: {
                            account: function() {
                                return $('#form_user_profile_input #username').val()
                            },
                            keyId : function(){
                                return $('#form_user_profile_input #keyId').val();
                            }
                        }
                    }
                },
                phone : {
                    checkPhone : true,
                    remote : {
                        type: 'post',
                        url: '/main/member/validate/account',
                        data: {
                            account: function() {
                                return $('#form_user_profile_input #phone').val()
                            },
                            keyId : function(){
                                return $('#form_user_profile_input #keyId').val();
                            }
                        }
                    }
                },
                email : {
                    email : true,
                    remote : {
                        type: 'post',
                        url: '/main/member/validate/account',
                        data: {
                            account: function() {
                                return $('#form_user_profile_input #email').val()
                            },
                            keyId : function(){
                                return $('#form_user_profile_input #keyId').val();
                            }
                        }
                    }
                }

            }
        });
    }

    $.validator.addMethod("checkPhone", function(value, element, params){
        var checkPhone = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
        return this.optional(element) || (checkPhone.test(value));
    },"请输入正确的手机号");

    //保存
    $("#save-center-profile").on("click", function(){
        if (!$('#form_user_profile_input').valid()) {
            return false;
        }
        __panelOverlay_show("user-center-profile");
        __form_save("form_user_profile_input", "/main/userCenter/profileSave", function(data){
            __panelOverlay_hide("user-center-profile");
        });
    });

</script>

</html>